<template>
	<view class="changeList">
		<!--scroll-view组件：实现点击右侧字母跳转到相应位置 -->
		<scroll-view 
		class="scrolly" 
		scroll-y="true" 
		:scroll-into-view="viewId">
			<view class="city-box">
				<view class="box">
					<view class="title">
						<icon class="iconfont icon-dingwei"></icon>
						当前城市
					</view>
					<view class="currentCity">{{tcity}}</view>
				</view>
				<view class="box">
					<view class="title">
						热门城市
					</view>
					<view class="hotlist">
						<view class="item" v-for="(item,index) of list" :key="index" >
							{{item}}
						</view>
					</view>
				</view>
				<!-- 2.数据绑定 v-for渲染展示城市名字 -->
				<view class="box-list" v-for="(cities,index) in city" :key="index" >
					<view class="initial"  :id="cities.initial">
						{{cities.initial}}
					</view>
					<view class="city-name" 
					v-for="item of cities.list" 
					:key="item.code" 
					@click="click(item.name)"
					>
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"changeList",
		// 1.接收来自changeCity请求到的城市名字
		props:['city','letter'],
		data() {
			return {
				list:['北京','上海','广州','深圳','成都','重庆','西安','昆明',
				'南京','郑州','武汉','苏州'],
				viewId:'',
				tcity:"北京"
			};
		},
		methods:{
			click(res){
				// 设置缓存接口
				uni.setStorage({
					key:'city',
					data:res
					// success() {
					// 	console.log('success')
					// }
				})
				// 获取缓存接口
				uni.getStorage({
					key:'city',
					success:(res)=>{
						// console.log(res)
						this.tcity=res.data
					}
				})
				uni.redirectTo({
					url:'/pages/city/city'
				})
			}
		},
		watch:{
			letter(){
				// console.log(this.letter)
				this.viewId=this.letter
				// console.log(this.viewId)
				
				
			}
		}
	}
</script>

<style>
	.changeList{
		width: 100%;
		background: #000000;
		z-index: 19;
		height: 100%;
	}
	.box{
		background: #222222;
		margin-top: 10px;
		pading:0 5px 20px 5px;
	}
	.title{
		height: 40px;
		line-height: 40px;
		margin-left: 15px;
		color: #FFFFFF;
		font-size: 14px;
	}
	.currentCity{
		color: #AAAAAA;
		font-size: 15px;
		margin-left: 15px;
		height: 30px;
		line-height: 30px;
	}
	.hotlist{
		width: 100%;
		overflow: hidden;
	}
	.item{
		width: 30%;
		height: 28px;
		line-height: 28px;
		font-size: 13.5px;
		float: left;
		background: #333333;
		margin-left: 2.5%;
		margin-bottom: 10px;
		text-align: center;
		color: #AAAAAA;
	}
	.box-list{
		padding: 8px 5px;
	}
	.initial{
		height: 25px;
		line-height: 25px;
		background: #000000;
		padding-left: 10px;
		color: #666666;
		font-size: 12px;
	}
	.city-name{
		background: #222222;
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		color: #AAAAAA;
		font-size: 15px;
	}
	.scrolly{
		height: 100%;
	}

</style>